import React, { Component, Fragment } from 'react';
import { Layout, message, Space, Menu, Modal, Form, Input, Checkbox, Button, Radio } from 'antd';
import { connect } from 'dva';
import AppMenu from '../components/appMenu'
import style from '../assets/less/baseLess.less'
import 'antd/dist/antd.css';
import baseBackGroundPic from '../assets/imgs/ghzy.jpg'
const { Header, Content, Sider } = Layout;

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 6, span: 16 },
};

class Page extends Component {
    constructor(props) {
        super(props),
            this.state = {
                isloginVisible: false,
                isRegisterVisible: false,
                isChangePassword:false,
            }
    }


    /**
     * 操作完成后读取服务器返回信息
     */
    readServerRes = data => {
        if (data.code == 0) {
            return
        }

        if (data.code !== 0) {
            if (data.code == 200) {
                message.success(data.msg, [1], this.initServerRes)
            }

            if (data.code !== 200) {
                message.error(data.msg, [1], this.initServerRes)
            }
        }
    }

    /**
     * 标记登录状态
     */
    welcomeUser = data => {
        if (data == false) {
            return (
                <Fragment>
                    <Space size='large' >
                        <a style={{color:"white",marginRight:"800"}} onClick={this.pageReBack}>返回导航页</a>
                        <a onClick={this.handleLogin}  style={{color:"white"}} >登录</a>
                        <a onClick={this.handleRegister } style={{color:"white"}}>注册</a>
                    </Space>
                </Fragment>
            )
        }

        if (data == true) {
            return (
                <Fragment>
                    <Space size='large'>
                        <a style={{color:"white",marginRight:"800"}} onClick={this.pageReBack}>返回导航页</a>
                        <a style={{color:"white"}}>欢迎{this.props.user.nickName}登录系统</a>
                        <a style={{color:"white"}} onClick={this.handleLogout}>登出</a>
                        <a style={{color:"white"}} onClick={this.changePasswordById}>修改密码</a>
                    </Space>
                </Fragment>

            )
        }
    }

    pageReBack = () => {
        this.props.dispatch({
            type:"app/appMenuReplacePage",
            data:'/'
        })
    }

    initServerRes = () => {
        this.props.dispatch({
            type: "app/initServerRes",
        })
    }

    handleLogin = () => {
        this.setState({
            isloginVisible: true
        })
    }

    handleLogout = () => {
        this.props.dispatch({
            type:'app/setLogind',
            data:false
        })

        this.props.dispatch({
            type:'app/setUser',
            data:{}
        })
    }

    handleLoginBlock = () => {
        this.setState({
            isloginVisible: false
        })
    }

    handleRegister = () => {
        this.setState({
            isRegisterVisible: true
        })
    }

    handleRegisterBlock = () => {
        this.setState({
            isRegisterVisible: false
        })
    }

    changePasswordById = () => {
        this.setState({
            isChangePassword:true
        })
    }

    handleChangePassword = () => {
        this.setState({
            isChangePassword:false
        })
    }

    onFinishChangePassword = values => {
        if(values.oldPassword != this.props.user.password){
            message.error("旧密码输入错误！")
            return
        }

        this.props.dispatch({
            type:"backstageManagement/changePasswordById",
            data:{
                id:this.props.user.id,
                password:values.newPassword
            }
        })

        this.setState({
            isChangePassword:false
        })
    }

    onFinishRegister = (values) => {
        if (values.password != values.confirmPassword) {
            message.error("两次输入的密码不同，请重新输入")
            return
        }

        this.props.dispatch({
            type: "app/register",
            data: values
        })

        this.setState({
            isRegisterVisible: false
        })
    }

    onFinishFailedRegister = (errorInfo) => {
        message.error('注册失败:', errorInfo);
        this.setState({
            isRegisterVisible: false
        })
    }

    onFinishLogin = (values) => {
        this.props.dispatch({
            type: "app/login",
            data: values
        })

        this.setState({
            isloginVisible: false
        })
    }

    onFinishFailedLogin = (errorInfo) => {
        message.error('登录失败:', errorInfo);
        this.setState({
            isRegisterVisible: false
        })
    }
    renderAppMenu = isTechnologyPage => {
        if(!isTechnologyPage){
            return(
                <AppMenu></AppMenu>
            )
        }else{
            return
        }
    }

    componentDidCatch(error, errorInfo) {
        message.error("出现错误:"+(errorInfo == null||undefined ? "未知错误" : errorInfo),[2])
    }
    
    render() {
        return (
            <Layout>
                <Header  style={{ background: '#FFFFFF', width: '100%',height:'193px', margin:'0 auto',padding:0}} >
                    <div style={
                        {   
                            width: '1080px',
                            height:'193px', margin:'0 auto',
                            backgroundImage:this.props.backGroundPictureUrl == undefined ? `URL(${require('../assets/imgs/ghzy.jpg')})` : `URL(${this.props.backGroundPictureUrl})` ,
                            paddingRight:"20px",textAlignLast:"right"
                        }
                    }>
                    {this.welcomeUser(this.props.logind)}
                    </div>
                </Header>
                <Layout style={{ background: '#FFFFFF' }}>
                    <Content id={style.content}>
                        {this.renderAppMenu(this.props.backGroundPictureUrl)}
                        {this.props.children}
                    </Content>
                </Layout>
                {this.readServerRes(this.props.serverRes)}
                <Modal
                    title="登录"
                    visible={this.state.isloginVisible}
                    onOk={this.handleLogin}
                    onCancel={this.handleLoginBlock}
                    destroyOnClose={true}
                    footer={null}
                >
                    <Form
                        {...layout}
                        name="login"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinishLogin}
                        onFinishFailed={this.onFinishFailedLogin}
                    >
                        <Form.Item
                            label="用户名"
                            name="userName"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                登录
                        </Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal
                    title="注册"
                    visible={this.state.isRegisterVisible}
                    onOk={this.handleRegister}
                    onCancel={this.handleRegisterBlock}
                    destroyOnClose={true}
                    footer={null}
                >
                    <Form
                        {...layout}
                        name="register"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinishRegister}
                        onFinishFailed={this.onFinishFailedRegister}
                    >
                        <Form.Item
                            label="设置账号"
                            name="userName"
                            rules={[{ required: true, message: '账号不能为空!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="设置昵称"
                            name="nickName"
                            rules={[{ required: true, message: '昵称不能为空!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="设置密码"
                            name="password"
                            rules={[{ required: true, message: '密码不能为空!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="确认密码"
                            name="confirmPassword"
                            rules={[{ required: true, message: '密码不能为空!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="用户类型"
                            name="userType"
                            rules={[{ required: true, message: '用户类型不能为空!' }]}
                        >
                            <Radio.Group>
                                <Radio value={1}>技术供应商</Radio>
                                <Radio value={4}>验证/测试机构</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item
                            label="联系方式"
                            name="phone"
                            rules={[{ required: true, message: '联系方式不能为空!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                注册
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal
                    title="修改密码"
                    visible={this.state.isChangePassword}
                    onOk={this.handleChangePassword}
                    onCancel={this.handleChangePassword}
                    footer={null}
                >
                    <Form
                        {...layout}
                        name="changePassword"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinishChangePassword}
                        onFinishFailed={this.onFinishFailedChangePassword}
                    >
                        <Form.Item
                            label="旧密码"
                            name="oldPassword"
                            rules={[{ required: true, message: '密码不能为空!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="新密码"
                            name="newPassword"
                            rules={[{ required: true, message: '密码不能为空!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                修改
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </Layout>

        )
    }
}

const mapStateToProps = state => {
    let serverRes = state.app.serverRes
    let logind = state.app.logind
    let user = state.app.user
    return {
        serverRes,
        logind,
        user
    }
}

export default connect(mapStateToProps)(Page)